<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
</head>
<style type="text/css">
.text_container {
   margin-right: 100px;
}
#input_text {
   margin-right: -100px;
}
</style>
<h1>The Word-Guess Experiment</h1>

<hr>
<h2>Informed consent</h2>
<p>By completing this HIT you are giving your consent to participate
in a  research study by Professor Roger Levy of the University of
California at San Diego.&nbsp; Please take a moment to <a
href="{{url_for("static", filename="consent.html")}}"
target="_blank">read about giving informed  consent for this
study</a>. You can contact <a
href="mailto:nathaniel.smith@ed.ac.uk">nathaniel.smith@ed.ac.uk</a> or
<a href="mailto:rlevy@ucsd.edu">rlevy@ucsd.edu</a> with any questions
or concerns about this HIT.</p>

<hr>
<h2>Instruction:</h2>
In this task, we've selected a short story or magazine article
published in America in the 1960s, and your job is to read the text
and make guesses about what word is coming up next. For example, if
you read: <br>
<br>
   &nbsp;&nbsp;&nbsp;The children came [____] <br>
<br>
Then you might guess the next word is "inside", or "along", or any
number of things. Type your guess into the box, and then press Enter.
Then we'll show you what word was actually there, and give you a
chance to guess another word. <br>
<br>
You won't be penalized for guessing wrong, but try to do the best you can.
<hr>

<h2>{{text_title}}</h2>

<script  language=javascript>  
<!-- Initialize Variables -->
var startWord = {{start}};
var wordGap = {{gap}};
var div_index = 1;

var temp_sentence = "";
var display_text = [];
var display_text_index = 0;

var text_array = [];
var input_word_index = 0;

var array_index = 0;
var language = "";
var dialect = "";
var other_language = "";
var age;
var input_word = [];
var data = [language,
            dialect,
            other_language,
            age,
	    input_word,
	    ];
</script>

<script  language=javascript>  
function check()
{
    if(event.keyCode == 13 && document.getElementById("inputWord").value != "" && document.getElementById("inputWord").value != null){
	   var word = document.getElementById("inputWord").value;
           var word_number = (input_word_index*wordGap) + startWord + input_word_index;
           input_word_index++;
	   data[4][array_index] = [ text_array[word_number].number,word];

	   array_index++;
	   $("#main_text").append( display_text[array_index] );
	   document.getElementById("inputWord").value = "";

           var input_textfield = document.getElementById("hr1");
           input_textfield.scrollIntoView(false);
	   
	   if(array_index + 2> display_text.length){
		   document.getElementById("input_text").style.display = "none";
                   document.getElementById("user_display").style.display = "inline";

                   form = document.forms['FirstForm'];
                   form.elements['main_data'].value = JSON.stringify(data); 

                   document.getElementById("submit").scrollIntoView(false);
	   }
	}
}  

function check_info()
{
        form = document.forms['FirstForm'];

        data[0] = form.elements['language'].value;
        data[1] = form.elements['dialect'].value;
        data[2] = form.elements['other_language'].value;
        data[3] = form.elements['age'].value;

        form.elements['main_data'].value = JSON.stringify(data); 
        form.submit();
}

$(document).ready(function(){
    // set text_index
    form = document.forms['FirstForm'];
    form.elements['text_index'].value = '{{select_text_index}}' + '-' + '{{start}}' + '-' +'{{gap}}'; 

    //Load text to array
    var the_index = 0;
    {% for i in range (0, textlen): %}
        {% for j in range (0, paraglen[i]): %}
           text_array[the_index] = { "number" : '{{text[i][j][0]}}', "word": '{{text[i][j][1]}}' };
           the_index++;
	   //$("#main_text").append( text_array[the_index].number);
        {% endfor %}
        text_array[the_index-1].word = text_array[the_index-1].word + "<br> <br>";
    {% endfor %}

     var guess_word_index = startWord;
    for(var i = 0; i < text_array.length; i++){
        if(i == guess_word_index){
		guess_word_index = guess_word_index + wordGap + 1;
					
		display_text[display_text_index] = temp_sentence;
		display_text_index++;
				
		temp_sentence = "<u>" + text_array[i].word + "</u>" + " ";
	}
	else{
		temp_sentence = temp_sentence +  text_array[i].word + " ";
	}
    }
    display_text[display_text_index] = temp_sentence;
	
	$("#main_text").append( display_text[0]);
	
});
</script> 
<form action="" method="post" name="FirstForm">
    {{form.hidden_tag()}}
	
    <p class="text_container">
    <span id="main_text"></span>
    
    <span id="input_text">
    	<input type="text" id="inputWord" onkeydown="check()">
    </span>
    </p>

    <!--input id="Button1" type="button"  value="Check" onclick="check()" /-->
    <hr id="hr1">
    <div id="user_display" style="display:none">
        <p>
         What is your native language or languages?
	 <input type="text" id="language">
        </p>
	<p>
         What dialect of English do you speak? (E.g., New York, Midwest, Scottish, Indian, ...)
	 <input type="text" id="dialect">
        </p>
	<p>
	  What other languages do you speak?
	  <input type="text" id="other_language">
	</p>
	<p>
	  How old are you?
	  <input type="text" id="age">
	</p>
    <p><input type= button id="submit"  value="Submit!" onclick="check_info()"></p>
    </div>
    <div id="words_display" style="display:none">
        {{form.main_data}}
	{{form.text_index}}
    </div>
</form>
